<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>word-break</h1>
    <div style="word-break: normal;">
        <h3> word-break: normal —— 使用浏览器默认的换行规则</h3>
        This is a long and
        Honorificabilitudinitatibus califragilisticexpialidocious
        Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
        グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
    </div>
    <div style="word-break: break-all;">
        <h3> word-break: break-all —— 允许在单词内换行</h3>
        This
        is a long and
        Honorificabilitudinitatibus califragilisticexpialidociousTaumatawhakatangih
        angakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
    </div>
    <div style="word-break: keep-all;">
        <h3> word-break: keep-all —— 只能在半角空格或连字符处换行。</h3>
        This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
        Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
        グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
    </div>
</body>

</html>